<template>
  <div class="money">
    <div class="container">
      <div class="cloud" ref="cloudEleRef"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'

const texts = ['好', '多', '钱', '$', '￥', '💎', '💍', '💰', '🪙', '💴', '💵', '💶', '💷']

// 从生成的数组中随机取出一个字符
function randomText() {
  const text = texts[Math.floor(Math.random() * texts.length)]
  return text
}

let cloudEleRef = ref<HTMLDivElement>()
function rainEffect() {
  const cloudEle = cloudEleRef.value
  if (!cloudEle) return
  const textEle = document.createElement('div')
  textEle.innerText = randomText()
  textEle.classList.add('text')

  const left = Math.floor(Math.random() * 310)
  const size = Math.random() * 1.5
  const duration = Math.random()
  const styleSheets = {
    left: `${left}px`,
    fontSize: `${0.5 + size}em`,
    animationDuration: `${1 + duration}s`
  }
  Object.assign(textEle.style, styleSheets)

  cloudEle.appendChild(textEle)
  setTimeout(() => {
    cloudEle.removeChild(textEle)
  }, 2000)
}

// 每隔20ms创建一个雨滴元素

onMounted(() => {
  setInterval(() => rainEffect(), 20)
})
</script>
<style lang="scss">
.money {
  --body-color: #181c1f;
  --primary-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: var(--body-color);

  .container {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* 添加一个从下往上线性渐变的镜像效果，增加视觉层次感 */
    -webkit-box-reflect: below 1px
      linear-gradient(transparent, transparent, transparent, transparent, #0005);
  }

  .cloud {
    position: relative;
    top: 50px;
    z-index: 100;

    /* 横向云朵 */
    width: 320px;
    height: 100px;
    background-color: var(--primary-color);
    border-radius: 100px;

    /* drop-shadow函数将阴影效果应用于投影图像 */
    filter: drop-shadow(0 0 30px var(--primary-color));
  }
  .cloud::before {
    content: '';
    /* 左侧小云朵 */
    width: 110px;
    height: 110px;
    background-color: var(--primary-color);
    border-radius: 50%;
    position: absolute;
    top: -50px;
    left: 40px;

    /* 右侧大云朵 */
    box-shadow: 90px 0 0 30px var(--primary-color);
  }

  .cloud .text {
    --primary-color: yellow;
    position: absolute;
    top: 40px;
    height: 20px;
    line-height: 20px;

    text-transform: uppercase;
    color: var(--primary-color);
    /* 为文字添加阴影，看上去发光，增加视觉效果 */
    text-shadow:
      0 0 5px var(--primary-color),
      0 0 15px var(--primary-color),
      0 0 30px var(--primary-color);
    transform-origin: bottom;
    animation: animate 2s linear forwards;
  }

  @keyframes animate {
    0% {
      transform: translateX(0);
    }

    70% {
      transform: translateY(290px);
    }

    100% {
      transform: translateY(290px);
    }
  }
}
</style>
